<template>
  <!-- 策略列表 页面 -->
  <div class="strategyList-page app-container">
    <el-form ref="formInline1" label-position="left" :inline="true" label-width="70px" :model="formInline" class="demo-form-inline">
      <el-form-item label="组合名称" prop="compositionName">
        <el-input v-model="formInline.compositionName" size="small" clearable placeholder="请输入组合名称" style="width: 150px;"></el-input>
      </el-form-item>
      <el-form-item label="分类名称" prop="classifyName">
        <el-input v-model="formInline.classifyName" size="small" clearable placeholder="请输入分类名称" style="width: 150px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="bg-green" size="small" @click="getList">查询</el-button>
        <el-button size="small" @click="resetForm(['formInline1'])">重置</el-button>
      </el-form-item>
    </el-form>
    
    <!-- 未展示 收益-风险区间 部分值 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      border fit
      size="mini"
      :header-cell-style="{background:'#dcedff',color:'#32639d'}"
      style="width: 100%;"
    >
      <el-table-column prop="strategyInfoVo.strategyId" label="编号" align="center" width="60" fixed></el-table-column>
      <el-table-column prop="strategyInfoVo.strategyName" label="策略名称" min-width="160" fixed show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.strategyInfoVo.hasNetWorthStatus" style="color: #4f95dd;cursor: pointer;" @click="netWorthHandle(scope.row.strategyInfoVo.strategyId)">{{ scope.row.strategyInfoVo.strategyName }}</span>
          <span v-else style="color: #999;cursor: pointer;" @click="$message('该策略净值不存在或者少于2条')">{{ scope.row.strategyInfoVo.strategyName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="strategyInfoVo.compositionName" label="所属组合" align="center" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="strategyInfoVo.classifyName" label="所属分类" align="center" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="strategyInfoVo.investName" label="所属投顾" align="center" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="strategyInfoVo.strategyMarket" label="投资市场" align="center" min-width="100"></el-table-column>
      <el-table-column prop="strategyInfoVo.strategyStyle" label="投资风格" align="center" width="80"></el-table-column>
      <el-table-column prop="strategyInfoVo.strategyMethod" label="投资方法" align="center" min-width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="strategyInfoVo.strategySubject" label="投资标的" align="center" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="strategyInfoVo.strategyBenchmarkingIndex" label="对标指数" align="center" min-width="70" show-overflow-tooltip></el-table-column>
      <el-table-column prop="strategyInfoVo.makeTime" label="成立日期" sortable align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.strategyInfoVo.makeTime | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="netWorthDetialBean.networthTime" label="净值时间" sortable align="center" width="100"></el-table-column>
      <el-table-column prop="netWorthDetialBean.unitNetworth" label="单位净值" sortable align="center" width="94"></el-table-column>
      <el-table-column prop="netWorthDetialBean.reinstatementNetworth" label="累计净值" sortable align="center" width="94"></el-table-column>
      <el-table-column prop="netWorthDetialBean.cumulativeNetworth" label="复权净值" sortable align="center" width="94"></el-table-column>
      <el-table-column prop="netWorthDetialBean.thisyearAnnualizedincomeRate" label="今年以来收益率" sortable align="center" width="130">
        <template slot-scope="scope">
          <span v-if="scope.row.netWorthDetialBean.thisyearAnnualizedincomeRate!=null" :class="scope.row.netWorthDetialBean.thisyearAnnualizedincomeRate>0?'positiveFc':'negativeFc'">
            {{ scope.row.netWorthDetialBean.thisyearAnnualizedincomeRate }}%
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
       <el-table-column prop="netWorthDetialBean.annualizedincomeRate" label="收益率" sortable align="center" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.netWorthDetialBean.annualizedincomeRate!=null" :class="scope.row.netWorthDetialBean.annualizedincomeRate>0?'positiveFc':'negativeFc'">
            {{ scope.row.netWorthDetialBean.annualizedincomeRate }}%
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="riskIndicatorsBean.maximumDrawdownRate" label="最大回撤" sortable align="center" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.riskIndicatorsBean.maximumDrawdownRate!=null">{{ scope.row.riskIndicatorsBean.maximumDrawdownRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="riskIndicatorsBean.annualizedIncomeRate" label="收益率(年化)" sortable align="center" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.riskIndicatorsBean.annualizedIncomeRate!=null" :class="scope.row.riskIndicatorsBean.annualizedIncomeRate>0?'positiveFc':'negativeFc'">
            {{ scope.row.riskIndicatorsBean.annualizedIncomeRate }}%
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="riskIndicatorsBean.annualFluctuationsRate" label="波动率(年化)" sortable align="center" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.riskIndicatorsBean.annualFluctuationsRate!=null">{{ scope.row.riskIndicatorsBean.annualFluctuationsRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="riskIndicatorsBean.sharpeRate" label="夏普率" align="center" sortable width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.riskIndicatorsBean.sharpeRate!=null">{{ scope.row.riskIndicatorsBean.sharpeRate }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="getList" />
    
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import { strategyType } from '@/api/policyManage'
import { fetchList } from '@/api/strategyList'
import { parseTime } from '@/utils'

export default {
  name: 'StrategyList',
  components: { Pagination },
  data() {
    return {
      dict: [],

      segmentList: [
        {
          id: 0,
          name: '今年以来'
        },
        {
          id: 1,
          name: '近一月'
        },
        {
          id: 3,
          name: '近三月'
        },
        {
          id: 6,
          name: '近六月'
        },
        {
          id: 12,
          name: '近一年'
        },
        {
          id: 24,
          name: '近两年'
        },
        {
          id: 36,
          name: '近三年'
        },
        {
          id: 99,
          name: '成立以来'
        },
      ],
      searchProfitList: ['收益排名10%', '收益排名20%', '收益排名30%'],
      maximumDrawdownRateList: ['回撤排名10%', '回撤排名20%', '回撤排名30%'],
      sharpeRateList: ['夏普比率排名10%', '夏普比率排名20%', '夏普比率排名30%'],
      sharpeNum: '',
      syl: '',
      zdhc: '',

      isSelectMore: false,
      selectCreateDateList: ['6个月以下', '6个月-1年', '1-3年', '3-5年', '5年以上'],
      selectCreateDate: '',
      selectNewDataList: ['15天内', '30天内', '45天内', '60天内'],
      selectNewData: '',
      formInline: {
        searchType: 1, // 模糊搜索
        segment: 0,
        startMakeTime: null,
        endMakeTime: null,
        date3: null,
        date4: null,
        investName: '',
        compositionId: '',
        classifyId: '',
        compositionName: '',
        classifyName: '',
      },
      select_market: [],
      select_method: [],
      select_style: [],
      select_subject: [],

      total: 0,
      listLoading: false,
      listQuery: {
        pageCurrent: 1,
        limit: 20
      },
      list: [],
      multipleSelection: [],

      uploadBtnIcon: '',

    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  watch: {
    syl(i) {
      const list = [10,20,30]
      this.formInline.syl1 = 0
      this.formInline.syl2 = list[i]
    },
    zdhc(i) {
      const list = [10,20,30]
      this.formInline.zdhc1 = 0
      this.formInline.zdhc2 = list[i]
    },
    sharpeNum(i) {
      const list = [10,20,30]
      this.formInline.sharpeNum1 = 0
      this.formInline.sharpeNum2 = list[i]
    },
    selectCreateDate(val) {
      if(typeof val === 'number') {
        const list = [[0, 6], [6, 12], [12, 36], [36, 60], [60, 0]]
        this.formInline.startMakeTime = this.stageDate(list[val][0], list[val][1])[0]
        this.formInline.endMakeTime = this.stageDate(list[val][0], list[val][1])[1]
        if(val == 4) this.formInline.startMakeTime = null
      }else {
        this.formInline.startMakeTime = null
        this.formInline.endMakeTime = null
      }
    },
    selectNewData(val) {
      if(typeof val === 'number') {
        const list = [15, 30, 45, 60]
        const startTime = new Date().getTime() - 3600 * 1000 * 24 * list[val]
        const start = parseTime(startTime, '{y}-{m}-{d}')
        this.formInline.date3 = start
        this.formInline.date4 = parseTime(new Date(), '{y}-{m}-{d}')
      }else {
        this.formInline.date3 = ''
        this.formInline.date4 = ''
      }
    },
  },
  created() {
    if(this.$route.query.compositionId) {
      this.formInline.compositionId = this.$route.query.compositionId
      this.formInline.compositionName = this.$route.query.compositionName
    }
    if(this.$route.query.classifyId) {
      this.formInline.classifyId = this.$route.query.classifyId
      this.formInline.classifyName = this.$route.query.classifyName
    }
    this.getList()
    this.getStrategyType()
  },
  activated() {
    const routeQuery = this.$route.query
    if(routeQuery.compositionId&&routeQuery.compositionId!=this.formInline.compositionId) {
      this.formInline.compositionId = routeQuery.compositionId
      this.formInline.classifyId = ''
      this.formInline.compositionName = routeQuery.compositionName
      this.formInline.classifyName = ''
      this.getList()
      this.getStrategyType()
    }
    if(routeQuery.classifyId&&routeQuery.classifyId!=this.formInline.classifyId) {
      this.formInline.compositionId = routeQuery.compositionId ? routeQuery.compositionId : ''
      this.formInline.classifyId = routeQuery.classifyId
      this.formInline.compositionName = routeQuery.compositionName ? routeQuery.compositionName : ''
      this.formInline.classifyName = routeQuery.classifyName
      this.getList()
      this.getStrategyType()
    }
  },
  methods: {
    stageDate(s, e) {
      const s_time = s ? s*30 : 1
      const day = parseTime(new Date(), '{d}')
      const endTime = new Date().getTime() - 3600 * 1000 * 24 * s_time
      const startTime = new Date().getTime() - 3600 * 1000 * 24 * e * 30.5
      let end = parseTime(endTime, '{y}-{m}-{d}')
      let start = parseTime(startTime, '{y}-{m}-{d}')
      const endList = end.split('-')
      const startList = start.split('-')
      endList[2] = day
      startList[2] = day
      start = startList.join('-')
      end = endList.join('-')
      return [start, end]
    },
    resetForm(formNameList) {
      formNameList.forEach(element => {
        this.$refs[element].resetFields()
      })
      this.selectCreateDate = ''
      this.selectNewData = ''
      this.formInline = {
        searchType: 1, // 模糊搜索
        segment: 0,
        startMakeTime: null,
        endMakeTime: null,
        date3: null,
        date4: null,
        investName: '',
        compositionId: '',
        classifyId: '',
      }
      this.$router.push('/policyManage')
      this.getList()
    },
    
    netWorthHandle(id) {
      this.$router.push({
        path: `/policyManage/netWorthAnalysis/${id}`,
        query: {
          // id,
          userId: this.userId
        }
      })
    },
    getStrategyType() {
      strategyType().then(res => {
        console.log('分类', res)
        this.dict = res.body
        this.select_market = res.body.market
        this.select_method = res.body.method
        this.select_style = res.body.style
        this.select_subject = res.body.subject
      })
    },
    getList() {
      this.listLoading = true
      fetchList({
        userId: this.userId,
        ...this.listQuery,
        ...this.formInline
      }).then(res => {
        this.listLoading = false
        console.log('策略管理', res)
        this.list = res.list
        this.total = res.total || 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.strategyList-page {
  .new-date {
    ::v-deep .el-form-item__label {width: 100px !important;}
  }
  .label-width-120 {
    ::v-deep .el-form-item__label {width: 110px !important;}
  }
  .label-width-60 {
    ::v-deep .el-form-item__label {width: 56px !important;}
  }
  .label-width-80 {
    ::v-deep .el-form-item__label {width: 80px !important;}
  }
}
</style>
